<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {
      al2img: `${this.$const.STATIC_PATH}/css/features/open/1.png`,
      openimg: `${this.$const.STATIC_PATH}/css/features/open/2.png`,
      pc: {
        one: `${this.$const.STATIC_PATH}/css/features/separate/1.png`,
        two: `${this.$const.STATIC_PATH}/css/features/separate/2.png`,
        three: `${this.$const.STATIC_PATH}/css/features/separate/3.png`,
        multiport: `${this.$const.STATIC_PATH}/css/features/mobile/pc.png`,
        api: `${this.$const.STATIC_PATH}/css/features/api/1.png`,
        light: `${this.$const.STATIC_PATH}/css/features/light/pc.png`,
        realization: `${this.$const.STATIC_PATH}/css/features/light/pc-2.png`,
        cloud: `${this.$const.STATIC_PATH}/css/features/cloud/pc.png`,
      },
      mobile: {
        one: `${this.$const.STATIC_PATH}/css/features/separate/1-m.png`,
        two: `${this.$const.STATIC_PATH}/css/features/separate/2-m.png`,
        three: `${this.$const.STATIC_PATH}/css/features/separate/3-m.png`,
        multiport: `${this.$const.STATIC_PATH}/css/features/mobile/m.png`,
        api: `${this.$const.STATIC_PATH}/css/features/api/1-m.png`,
        light: `${this.$const.STATIC_PATH}/css/features/light/1-m.png`,
        light1: `${this.$const.STATIC_PATH}/css/features/light/2-m.png`,
        light2: `${this.$const.STATIC_PATH}/css/features/light/3-m.png`,
        realization: `${this.$const.STATIC_PATH}/css/features/light/4-m.png`,
        realization1: `${this.$const.STATIC_PATH}/css/features/light/5-m.png`,
        realization2: `${this.$const.STATIC_PATH}/css/features/light/6-m.png`,
        cloud: `${this.$const.STATIC_PATH}/css/features/cloud/m.png`,
      },
      lightSwipe: [0, 1, 2],
      bxSwipe: [0, 1, 2],
      lightIndex: 0,
      bxIndex: 0,
    };
  },
  computed: {
    ...mapState({
      desc: (state) => state.config.featurePageText || {},
      isMobile: (state) => state.isMobile,
    }),
  },
  methods: {
    handleLightChange(index) {
      this.lightIndex = index;
    },
    handleBXChange(index) {
      this.bxIndex = index;
    },
  },
};
</script>

<template>
  <div>
    <div class="dzq-index-section">
      <div class="dzq-index-section__hd">
        <h2 class="dzq-index-section__title"><span>开源</span></h2>
      </div>
      <div class="dzq-index-section__bd">
        <div class="dzq-layout_section-open">
          <div class="dzq-grid">
            <div class="dzq-grid__item">
              <div class="dzq-grid__box">
                <div class="dzq-layout_section-open-item">
                  <img :src="al2img" />
                  <div class="dzq-layout_section-open-title">Apache License 2.0</div>
                  <div class="dzq-layout_section-open-text">
                    {{ desc.al2 }}
                    <a v-if="desc.al2url" target="_blank" :href="desc.al2url">查看协议</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="dzq-grid__item">
              <div class="dzq-grid__box">
                <div class="dzq-layout_section-open-item">
                  <img :src="openimg" />
                  <div class="dzq-layout_section-open-title">社区开源</div>
                  <div class="dzq-layout_section-open-text">
                    {{ desc.discuzOpen }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dzq-index-section dzq-index-section--lightbg">
      <div class="dzq-index-section__hd">
        <h2 class="dzq-index-section__title"><span>前后分离</span></h2>
        <p class="dzq-index-section__description">{{ desc.qhfl }}</p>
      </div>
      <div class="dzq-index-section__bd">
        <div class="dzq-layout_section-separate">
          <img class="dzq-layout_section-separate-pc" :src="pc.one" />
          <img class="dzq-layout_section-separate-pc" :src="pc.two" />
          <img class="dzq-layout_section-separate-pc" :src="pc.three" />
          <img class="dzq-layout_section-separate-m" :src="mobile.one" />
          <img class="dzq-layout_section-separate-m" :src="mobile.two" />
          <img class="dzq-layout_section-separate-m" :src="mobile.three" />
        </div>
      </div>
    </div>
    <div class="dzq-index-section">
      <div class="dzq-index-section__hd">
        <h2 class="dzq-index-section__title"><span>多端</span></h2>
        <p class="dzq-index-section__description">{{ desc.multiport }}</p>
      </div>
      <div class="dzq-index-section__bd">
        <div class="dzq-layout_section-mobile">
          <img class="dzq-layout_section-mobile-pc" :src="pc.multiport" />
          <img class="dzq-layout_section-mobile-m" :src="mobile.multiport" />
        </div>
      </div>
    </div>
    <div class="dzq-index-section dzq-index-section--lightbg">
      <div class="dzq-index-section__hd">
        <h2 class="dzq-index-section__title"><span>接口</span></h2>
        <p class="dzq-index-section__description">{{ desc.api }}</p>
      </div>
      <div class="dzq-index-section__bd">
        <div class="dzq-layout_section-api">
          <img class="dzq-layout_section-api-pc" :src="pc.api" />
          <img class="dzq-layout_section-api-m" :src="mobile.api" />
        </div>
      </div>
    </div>
    <div class="dzq-index-section">
      <div class="dzq-index-section__hd">
        <h2 class="dzq-index-section__title"><span>轻量</span></h2>
        <p class="dzq-index-section__description">{{ desc.light }}</p>
      </div>
      <div class="dzq-index-section__bd">
        <div class="dzq-layout_section-light">
          <img class="dzq-layout_section-light-pc" :src="pc.light" />
          <div class="dzq-layout_section-light-m">
            <div v-if="isMobile" class="dzq-layout_section-light__box">
              <van-swipe
                class="dzq-layout_section-light__list"
                style="transform: translate(0)"
                :autoplay="2000"
                :show-indicators="false"
                @change="handleLightChange"
              >
                <van-swipe-item>
                  <img class="dzq-layout_section-light__link" :src="mobile.light" />
                </van-swipe-item>
                <van-swipe-item>
                  <img class="dzq-layout_section-light__link" :src="mobile.light1" />
                </van-swipe-item>
                <van-swipe-item>
                  <img class="dzq-layout_section-light__link" :src="mobile.light2" />
                </van-swipe-item>
              </van-swipe>
            </div>
            <div class="dzq-layout_section-light__tool">
              <span
                v-for="item in lightSwipe"
                :key="item"
                class="dzq-layout_section-light__dot"
                :class="
                  item === lightIndex
                    ? 'dzq-layout_section-light__dot is-selected'
                    : 'dzq-layout_section-light__dot'
                "
              ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dzq-index-section dzq-index-section--lightbg">
      <div class="dzq-index-section__hd">
        <h2 class="dzq-index-section__title"><span>变现</span></h2>
        <p class="dzq-index-section__description">{{ desc.realization }}</p>
      </div>
      <div class="dzq-index-section__bd">
        <div class="dzq-layout_section-light">
          <img class="dzq-layout_section-light-pc" :src="pc.realization" />
          <div class="dzq-layout_section-light-m">
            <div v-if="isMobile" class="dzq-layout_section-light__box">
              <van-swipe
                class="dzq-layout_section-light__list"
                style="transform: translate(0)"
                :autoplay="2000"
                :show-indicators="false"
                @change="handleBXChange"
              >
                <van-swipe-item>
                  <img class="dzq-layout_section-light__link" :src="mobile.realization" />
                </van-swipe-item>
                <van-swipe-item>
                  <img class="dzq-layout_section-light__link" :src="mobile.realization1" />
                </van-swipe-item>
                <van-swipe-item>
                  <img class="dzq-layout_section-light__link" :src="mobile.realization2" />
                </van-swipe-item>
              </van-swipe>
            </div>
            <div class="dzq-layout_section-light__tool">
              <span
                v-for="item in bxSwipe"
                :key="item"
                class="dzq-layout_section-light__dot"
                :class="
                  item === bxIndex
                    ? 'dzq-layout_section-light__dot is-selected'
                    : 'dzq-layout_section-light__dot'
                "
              ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dzq-index-section">
      <div class="dzq-index-section__hd">
        <h2 class="dzq-index-section__title"><span>上云</span></h2>
        <p class="dzq-index-section__description">{{ desc.cloud }}</p>
      </div>
      <div class="dzq-index-section__bd">
        <div class="dzq-layout_section-cloud">
          <img class="dzq-layout_section-cloud-pc" :src="pc.cloud" />
          <img class="dzq-layout_section-cloud-m" :src="mobile.cloud" />
        </div>
      </div>
    </div>
  </div>
</template>
